<template>
    <div class="carousel-container">
        <div
            class="carousel-slide"
            :style="{ transform: 'translateX(' + (-currentIndex * 600) + 'px)' }"
        >
            <img
                v-for="(image, index) in images"
                :src="image"
                :key="index"
                alt="Slide"
            >
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentIndex: 0,
            images: [
                'https://via.placeholder.com/600x300?text=Slide%201',
                'https://via.placeholder.com/600x300?text=Slide%202',
                'https://via.placeholder.com/600x300?text=Slide%203'
            ]
        };
    },
    mounted() {
        this.startCarousel();
    },
    methods: {
        startCarousel() {
            setInterval(() => {
                this.nextSlide();
            }, 3000);
        },
        nextSlide() {
            this.currentIndex = (this.currentIndex + 1) % this.images.length;
        },
        prevSlide() {
            this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : this.images.length - 1;
        }
    }
};
</script>

<style scoped>
.carousel-container {
    position: relative;
    width: 600px;
    height: 300px;
    overflow: hidden;
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}
</style>